<!-- 天气预报 -->
<template>
  <div class='page4'>
    <Border title="天气预报" class="p">
      <template>
        <img src="@/assets/imgs/f1.png" alt="">
        <div class="" @click="show7">未来7天</div>
      </template>
      <template #content>
        <div class="weather">
          <div class="headers">
            <span :class="{active:currDate==index}" v-for="(item,index) in dateList" :key="index" @click="changeDate(index)">{{item.title}}</span>
          </div>
          <div class="contents">
            <div class="left">
              <img src="@/assets/imgs/rain.png" alt="">
              <div>20℃</div>
            </div>
            <div class="right">
              <div class="q">小雨转小到中雨</div>
              <div class="pp">东南风1~3级</div>
              <div>
                <span class="tips">44%</span>
                <span>2.5M/H</span>
              </div>
              <div>
                <span class="tips">1007HPa</span>
                <span>2.5KM</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Border>
    <Border title="近24小时极值雨量">
      <template>
        <img @click="showS" src="@/assets/imgs/f1.png" alt="" style="margin-right:5px">
        <img src="@/assets/imgs/msg.png" alt="">
        <div class="">更多</div>
      </template>
      <template #content>
        <div class="hour24">
          <div class="headers">
            <span :class="{active:currHour==index}" v-for="(item,index) in hourList" :key="index" @click="changeHour(index)">{{item.title}}</span>
          </div>
          <ul class="contents">
            <li class="item" v-for="(item,index) in list24" :key="index">
              <div class="one slh">{{item.addr}}</div>
              <div class="two">
                <div :style="{width:item.percent}"></div>
              </div>
              <div class="three">{{item.mm}}</div>
              <div class="four slh">{{item.area}}</div>
            </li>
          </ul>
        </div>
      </template>
    </Border>
    <div class="boxsss">
      <Dialog title="未来七天天气" :show.sync="showWeather">
        <ul class="weather7">
          <li class="table_header">
            <div>时间</div>
            <div>天气</div>
            <div>气温</div>
            <div>风力</div>
          </li>
          <li v-for="(item,index) in 7" :key="index">
            <div>2021.06.1{{index}}</div>
            <div>36.25</div>
            <div>36.7</div>
            <div>5</div>
          </li>
        </ul>
      </Dialog>
      <Dialog title="实时水情（中大型水库）" :show.sync="showSq">
        <ul class="weather7">
          <li class="table_header">
            <div>时间</div>
            <div>天气</div>
            <div>气温</div>
            <div>风力</div>
          </li>
          <li v-for="(item,index) in 9" :key="index">
            <div>2021.06.17</div>
            <div>36.25</div>
            <div>36.7</div>
            <div>5</div>
          </li>
        </ul>
        <div class="paga">
          <span>共<b>50</b>条记录</span>
          <div>&lt;上一页</div>
          <div>1</div>
          <div>下一页></div>
        </div>
      </Dialog>
    </div>

    <!-- 卫星图 -->
    <div class="wx_box" :class="{active:full1}">
      <div class="headers">
        <div>卫星云图</div>
        <div>
          <img src="@/assets/imgs/qq.png" alt="">
          <img src="@/assets/imgs/full.png" alt="" @click="full1=!full1">
        </div>
      </div>
      <div class="contents">
        <img src="@/assets/imgs/wx.png" alt="">
      </div>
    </div>
    <!-- 气象雷达 -->
    <div class="wx_box qx" :class="{active:full2}">
      <div class="headers">
        <div>气象雷达</div>
        <div>
          <img src="@/assets/imgs/qq.png" alt="">
          <img src="@/assets/imgs/full.png" alt="" @click="full2=!full2">
        </div>
      </div>
      <div class="contents">
        <img src="@/assets/imgs/qx.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Border from "@/components/border"
import Dialog from '@/components/dialog.vue'

export default {
  data() {
    return {
      full1: false,
      full2: false,
      showWeather: false,
      showSq: false,
      currDate: 0,
      dateList: [
        { title: '今天' },
        { title: '明天' },
        { title: '后天' },
      ],
      currHour: 0,
      hourList: [
        { title: '1小时' },
        { title: '3小时' },
        { title: '6小时' },
        { title: '12小时' },
        { title: '24小时' },
      ],
      list24: [
        {
          addr: '下德水库（水雨站）',
          percent: "20%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '下湖y',
          percent: "50%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '白庙（单雨量站）',
          percent: "60%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '林浦水闸(外)(水雨...',
          percent: "35%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '下德水库（水雨站）',
          percent: "35%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '下德水库（水雨站）',
          percent: "20%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '下湖y',
          percent: "50%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '白庙（单雨量站）',
          percent: "60%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '林浦水闸(外)(水雨...',
          percent: "35%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '下德水库（水雨站）',
          percent: "35%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '下德水库（水雨站）',
          percent: "20%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '下湖y',
          percent: "50%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '白庙（单雨量站）',
          percent: "60%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '林浦水闸(外)(水雨...',
          percent: "35%",
          mm: 13,
          area: "马尾区"
        },
        {
          addr: '下德水库（水雨站）',
          percent: "35%",
          mm: 13,
          area: "马尾区"
        },
      ]
    };
  },

  components: { Border, Dialog },

  computed: {},


  created() { },

  mounted() { },

  methods: {
    // 切换今/明/后天
    changeDate(i) {
      if (i == this.currDate) return
      this.currDate = i
    },
    // 切换小时
    changeHour(i) {
      if (i == this.currHour) return
      this.currHour = i
    },
    // 
    show7() {
      this.showSq = false
      this.showWeather = true
    },
    showS() {
      this.showWeather = false
      this.showSq = true
    }
  }
}

</script>
<style lang='less' scoped>
.page4 {
  padding-top: 20px;
  .p {
    margin-bottom: 20px;
  }
  .weather {
    height: 170px;
    font-size: 14px;
    .headers {
      line-height: 24px;
      display: flex;
      justify-content: center;
      padding: 10px 0;
      span {
        width: 83px;
        cursor: pointer;
        background-color: #06424f;
        height: 24px;

        text-align: center;
        border: 1px solid #06586d;
      }
      span.active {
        background-color: #28869b;
      }
      span:first-child {
        border-radius: 12px 0px 0px 12px;
      }
      span:last-child {
        border-radius: 0 12px 12px 0;
      }
    }
    .contents {
      display: flex;
      padding: 0 20px;
      .left {
        text-align: center;
        margin-right: 20px;
        img {
          width: 72px;
        }
        div {
          text-align: center;
          font-size: 24px;
        }
      }
      .right {
        .q {
          font-size: 22px;
        }
        .pp {
          font-size: 20px;
          margin-bottom: 10px;
        }
        .tips {
          margin-right: 20px;
          display: inline-block;
          margin-bottom: 5px;
          width: 80px;
        }
      }
    }
  }
  .hour24 {
    height: 475px;
    .headers {
      line-height: 24px;
      display: flex;
      font-size: 14px;
      justify-content: center;
      padding: 10px 0;
      span {
        width: 60px;
        cursor: pointer;
        background-color: #06424f;
        height: 24px;
        text-align: center;
        border: 1px solid #06586d;
      }
      span.active {
        background-color: #28869b;
      }
      span:first-child {
        border-radius: 12px 0px 0px 12px;
      }
      span:last-child {
        border-radius: 0 12px 12px 0;
      }
    }
    .contents {
      height: calc(100% - 50px);
      overflow: auto;
      padding: 0 10px;
      .item {
        line-height: 30px;
        div {
          flex: none;
          text-align: center;
        }
        font-size: 12px;
        display: flex;
        .one {
          width: 40%;
        }
        .two {
          width: 25%;
          display: flex;
          align-items: center;
          div {
            border-radius: 0 4px 4px 0;
            height: 70%;
            background: linear-gradient(90deg, #10b5d8, #1bcbe9, #29f9fe);
          }
        }
        .three {
          width: 15%;
        }
        .four {
          width: 20%;
        }
      }
    }
  }
  .boxsss {
    .weather7 {
      height: 305px;
      width: 580px;
      li {
        display: flex;
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 30px;
        & > div {
          width: 25%;
          text-align: center;
        }
      }
      li:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.3);
      }
      li.table_header {
        background: #06424f;
        border: 1px solid #06586d;
        height: 25px;
        line-height: 25px;
        margin-bottom: 10px;
        box-shadow: 6px 0 10px #056a68 inset, -6px 0 10px #056a68 inset;
      }
    }
    .paga {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      div {
        border: 1px solid #06586d;
        font-size: 12px;
        min-width: 20px;
        text-align: center;
        margin: 0 5px;
        color: #24899b;
        padding: 0 5px;
      }
    }
  }
  .wx_box {
    position: fixed;
    right: 30px;
    width: 236px;
    height: 148px;
    bottom: 220px;
    background: url("~@/assets/imgs/border11.png") no-repeat;
    background-size: 100%;
    .headers {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #0aeaea;
      padding: 0 10px;
      div {
        display: flex;
        align-items: center;
        img {
          margin-left: 5px;
          cursor: pointer;
        }
      }
    }
    .contents {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .wx_box.qx {
    bottom: 50px;
  }
  .wx_box.active {
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
    background: none;
    background-color: rgba(0, 0, 0, 0.7);
    .headers {
      height: 50px;
      background-color: #0c3b45;
    }
  }
}
</style>